<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      position: relative;
      width: 800px;
      height: 600px;
      border: 1px black solid;
    }
    .small{
      position: absolute;
      left: 0;
      top: 0;
      width: 20px;
      height: 20px;
      background-color: #000;
      border-radius: 50%;
      box-shadow: 0 0 5px #ccc;
    }
  </style>
</head>
<body>
  <div class="box">
  </div>

  <script>
    /*
      随机生成一个颜色
        1. rgb方案
          `rgb(${},${},${})`

        2. #十六进制方案
          # + 6个十六进制字符
    */
    function getRandomColor(){
      // 生成0~255之间的随机整数
      let rdm = () => Math.floor(Math.random()*256)
      return `rgb(${rdm()},${rdm()},${rdm()})`
    }

    function getRandomColor2(){
      return "#" + Math.random().toString(16).slice(-6)
    }


    let box = document.querySelector(".box")

    // 解放html 用js 生成这一切

    // 构造一个生成小球对象的函数
    // 每执行一次都会返回小球对象
    // 渲染在页面中
    function createBall(){
      let div = document.createElement("div")
      div.className = "small"
      const color = getRandomColor2()
      div.style.background = 
        `radial-gradient(circle at 15px 5px, #fff 0%, ${color} 100%)`
      box.appendChild(div)
      return {
        el: div,
        x: Math.random() * 780,
        y: Math.random() * 580,
        vx: Math.random() * 20 - 10, // -10~10
        vy: Math.random() * 20 - 10,
        setPosition,
        render,
      }
    }

    // 要做200个就要打包
    let ballList = []

    // 循环一次性生成了200个小球
    for(let i = 0; i < 30; i++){
      ballList.push(createBall())
    }

    // let ball1 = createBall()

    // let ball2 = createBall()
    
    // 数据层
    // 小球的位置
    // let x = 0
    // let y = 0
    // // 小球的速度 分解成为 x 和 y 速度
    // let vx = 6
    // let vy = 2
    // 变化层
    // 设置小球下一次的位置, 根据当前位置 和 速度进行设置
    function setPosition(){ // 如何更加精密的控制弹性碰撞?
      // 控制小球位置
      this.x += this.vx // 一定是加法
      this.y += this.vy
      
      // vx 和 vy 的速度衰减
      this.vx *= 0.98
      this.vy *= 0.98
      
      // 控制小球的速度
      // 右边界
      if(this.x > 780 ){ // 小球计算之后已经超出边界
        this.x = 780  // 收回边界
        this.vx *= -1 // x方向上的速度反向
      }
      // 左边界
      if(this.x < 0){
        this.x = 0
        this.vx *= -1
      }
      // 上边界
      if(this.y < 0){
        this.y = 0
        this.vy *= -1
      }
      // 下边界
      if(this.y > 580){
        this.y = 580
        this.vy *= -1
      }

      // 控制小球的重力加速度
      // this.vy += 0.1
    }
    // 渲染小球位置的函数
    function render(){
      this.el.style.left = `${this.x}px`
      this.el.style.top = `${this.y}px`
    }

    // 渲染层
    setInterval(function(){
      ballList.forEach(ball => {
        // setPosition.call(ball)
        // render.call(ball)
        ball.setPosition()
        ball.render()
      })

      // setPosition.call(ball1)
      // render.call(ball1)

      // setPosition.call(ball2)
      // render.call(ball2)
    }, 1000/60)

    // 假设有两个球 ... 假设有 100 个小球

    // 重构: 以前写的代码写的很垃圾, 优化改成 清晰 可读 可维护 的 优秀的代码

    /*
      n个小球: 对应了n组状态
        用对象
    
    */


   
  </script>
</body>
</html>